﻿import React, {Component} from 'react';
import { Card,Row,Col,Steps,Button,Space,Table,Input,Image,  } from 'antd';

const { Step } = Steps;
const { TextArea } = Input;
const titleStyle={fontSize:'20px',color: 'rgb(24,144,255)'}

// 订单详情页上半部分
class DingdanDetailsTop extends Component {
    constructor(props) {
        super(props);
        this.state={
            data:props.data,
        }
    }
    componentWillReceiveProps(nextProps) {
        this.setState({
            data: nextProps.data
        });
    }
    render() {
        const {data}=this.state
        const ImageSrc='http://192.168.2.236:8765'+data.head_img
        console.log(data)
        return (
            <Row style={{marginBottom:'20px'}}>
                {/*<Col span={4}>
                    <Card style={{height:'250px'}}>
                        <Row>
                            <Col span={24}>
                                <Image
                                    src={ImageSrc}
                                    fallback=""
                                />
                            </Col>
                        </Row>
                    </Card>
                </Col>*/}
                {/*<Col span={20}>
                    <Card style={{height:'250px'}} headStyle={titleStyle} title="订单状态">
                        <Row>
                            <Col span={24}>
                                <Steps>
                                    <Step status="finish" title="用户下单"  description="2018-04-09 18:19:23" />
                                    <Step status="finish" title="用户支付" description="2018-04-09 18:19:23" />
                                    <Step status="process" title="商家发货"  />
                                    <Step status="wait" title="用户签收"  />
                                </Steps>
                            </Col>
                        </Row>
                    </Card>
                </Col>*/}
            </Row>
        );
    }
}

// 订单详情页下半部分
const gridStyle1 = {
    width: '8%',
    height:'90px',
    lineHeight:'20px',
};
const gridStyle2 = {
    width: '17%',
    height:'90px',
    lineHeight:'20px',

};
const gridStyle3 = {
    width: '15%',
    height:'80px',
    lineHeight:'20PX',
    textAlign: 'center',
};
const gridStyle4 = {
    width: '35%',
    height:'80px',
    lineHeight:'20PX',
    textAlign: 'left',
};
const gridStyle5 = {
    // width: '12%',
    lineHeight:'0',
    textAlign: 'center',
};
const gridStyle6 = {
    // width: '88%',
    lineHeight:'0',
    textAlign: 'left',
};
class DingdanDetailsBottom extends Component {
    constructor(props) {
        super(props);
        this.state={
            data:props.data,
        }
    }
    componentWillReceiveProps(nextProps) {
        this.setState({
            data: nextProps.data
        });
    }
    xuanranDingdanxx=(data)=>{
        return data.map((item,i)=>{
            if (i%2===0){
                return <Card.Grid key={i} hoverable={false} style={gridStyle1}><p>{item.name}</p></Card.Grid>
            }else {
                return <Card.Grid key={i} hoverable={false} style={gridStyle2}><p>{item.name}</p></Card.Grid>
            }
        })
    }
    xuanranJiaoyixx=(data)=>{
        return data.map((item,i)=>{
            if (i%2===0){
                return <Card.Grid key={i} hoverable={false} style={gridStyle3}>{item.name}</Card.Grid>
            }else {
                return <Card.Grid key={i} hoverable={false} style={gridStyle4}>{item.name}</Card.Grid>
            }
        })
    }
    xuanranState=(data)=>{
        return data.map((item,i)=>{
            if (i%2===0){
                return <Card.Grid key={i} hoverable={false} style={gridStyle5}>{item.name}</Card.Grid>
            }else {
                return <Card.Grid key={i} hoverable={false} style={gridStyle6}>{item.name}</Card.Grid>
            }
        })
    }

    render() {
        const {data}=this.state
        const ImageSrc='http://192.168.2.236:8765'+data.head_img
        console.log(data)
        const xiangqing=`
            商品价（${data.goods_original_price}）*
            数量（${data.order_goods_number}）+
            配送费（${data.send_price}）-
            忧患劵（${data.coupons_reduction_price}）-
            退款（${data.refund_price}）`
        const dingdanxx=[
            {name:'商品名称'}, {name:data.goods_name}, {name:'用户姓名'}, {name:data.consignee},
            {name:'用户手机号'}, {name:data.consignee_phone}, {name:'订单状态'}, {name:data.order_state_name},
            {name:'订单号'}, {name:data.order_number}, {name:'支付时间'}, {name:data.order_pay_time},
            {name:'配送方式'}, {name:data.order_send_type_name}, {name:'邮寄地址'}, {name:data.user_site_name},
            {name:'快递公司'}, {name:data.order_send_company}, {name:'快递号'}, {name:data.tracking_number},
            {name:'订单创建时间'}, {name:data.order_create_time}, {name:'订单支付方式'}, {name:data.order_pay_method},
        ]
        const jiaoyixx=[
            {name:'订单详情'}, {name:xiangqing}, {name:'用户实际付款金额'}, {name:data.order_actual_price},
           /* {name:'应付供应商'}, {name:'商品名称'},*/ {name:'忧患劵抵用金额'}, {name:data.coupons_reduction_price},
            /*{name:'支付流水号'}, {name:'商品名称'}, */{name:'支付交易号'}, {name:data.order_pay_no},
            {name:'邮寄快递费'}, {name:data.send_price}, {name:'订单支付总金额'}, {name:data.order_total_price},
        ]
        const userState=[
            {name:'商品名称'}, {name:'商品名称'}, {name:'订单渠道'}, {name:'商品名称'},
            {name:'商品名称'}, {name:'商品名称'}, {name:'商品名称'}, {name:'商品名称'},
        ]

        const data2 = [
            {
                key: '1',
                name: 'John Brown',
                money: '￥300,000.00',
                address: 'New York No. 1 Lake Park',
            },
            {
                key: '2',
                name: 'Jim Green',
                money: '￥1,256,000.00',
                address: 'London No. 1 Lake Park',
            },
            {
                key: '3',
                name: 'Joe Black',
                money: '￥120,000.00',
                address: 'Sidney No. 1 Lake Park',
            },
        ];
        const columns = [
            {
                title: 'Name',
                dataIndex: 'name',
            },
            {
                title: 'Cash Assets',
                className: 'column-money',
                dataIndex: 'money',
                align: 'left',
            },
            {
                title: 'Address',
                dataIndex: 'address',
            },
        ];
        return (
            <div>
                <Card headStyle={titleStyle} title="订单信息">
                    {this.xuanranDingdanxx(dingdanxx)}
                </Card>

                <Card headStyle={titleStyle} title="交易信息">
                    {this.xuanranJiaoyixx(jiaoyixx)}
                </Card>

                {/*<Card headStyle={titleStyle} title="用户状态">
                    <Table
                        columns={columns}
                        dataSource={data2}
                        bordered
                    />
                </Card>*/}
            </div>
        );
    }
}

export default {
    DingdanDetailsTop,
    DingdanDetailsBottom
};